<template>
  <div class="order-show-picture-lists">
    <h1>{{ isMeasure ? '测量图纸' : '安装图纸' }}</h1>

    <div class="img-list" v-if="order && imgList">
      <div class="item" v-for="(item, index) in (isMeasure ? imgList[0] : imgList)" :key="item.id" :style="{backgroundImage: 'url(' + item.image.url + ')'}" @click="handlePreview(index)">
      </div>
      <el-dialog :ref="'pic-dialog'" :visible.sync="dialogVisible" size="large">
        <el-carousel :autoplay="false" :ref="panelType + '_carousel'" indicator-position="outside" :height="'800px'">
          <el-carousel-item v-for="item in (isMeasure ? imgList[0] : imgList)" :key="item.id">
            <img :src="item.image.url" alt="" style="width: 100%; height: 100%;">
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
    </div>

    <upload-img :img-type="panelType"></upload-img>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadImg from './uploadImg'

export default {
  props: {
    panelType: {
      required: true,
      type: String
    }
  },
  data: () => ({
    dialogVisible: false,
    initialIndex: 0,
  }),
  components: {
    UploadImg
  },
  created() {
  },
  mounted() {
    // console.log(this.panelType)
  },
  computed: {
    ...mapGetters('orders', [
      'order'
    ]),
    isMeasure: function() {
      return this.panelType === 'measure_pictures'
    },
    imgList: function() {
      if (this.isMeasure) {
        return this.order.measure_pictures
      } else {
        return this.order.completed_pictures
      }
    },
    pictureHeight: function() {
    },
  },
  methods: {
    handlePreview(index) {
      this.dialogVisible = true
      // console.log(this.$refs['pic-dialog'])
      // this.$refs[this.panelType + '_carousel'].setActiveItem(index)
      //
    }
  }
}
</script>
